<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/@tweenjs/tween.js/dist/tween.umd.js"></script>
    <style>
        .container {
            display: flex;
        }

        .num {
            width: 200px;
            height: 100px;
            background: linear-gradient(to right, #8BEAAF, #55EE7C);
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px;
            border-radius: 4px;
            color: #FFF;
        }
    </style>
</head>

<body>
    <button id="start">开始</button>
    <div class="container">
        <h1 class="num num1">0</h1>
        <h1 class="num num2">0</h1>
        <h1 class="num num3">0</h1>
        <h1 class="num num4">0</h1>
        <h1 class="num num5">0</h1>

    </div>

    <script>
        const num1 = document.querySelector('.num1');
        const num2 = document.querySelector('.num2');
        const num3 = document.querySelector('.num3');
        const num4 = document.querySelector('.num4');
        const num5 = document.querySelector('.num5');

        let requestAnimationFrameID;



        const start = document.querySelector('#start');
        start.addEventListener('click', function () {
            updateAnimation({
                number: 0
            }, {
                number: 100000
            }, num1);
            updateAnimation({
                number: 0
            }, {
                number: 999999
            }, num2);
            updateAnimation({
                number: 0
            }, {
                number: 888888
            }, num3);
            updateAnimation({
                number: 0
            }, {
                number: 666666
            }, num4);
            updateAnimation({
                number: 0
            }, {
                number: 555555
            }, num5);

            animate();
        });

        function updateAnimation(start, end, target) {
            const tween = new TWEEN.Tween(start);
            // 设置最终的值
            tween.to(end, 500);
            // 监听开始行为
            tween.onStart(() => {
                console.log('start');
            });
            // 监听更新行为
            tween.onUpdate((obj) => {
                target.textContent = obj.number.toFixed(0);
                // 随机生成16进制颜色
                const color = Math.random().toString(16).slice(2, 8);
                target.style.setProperty('color', `#${color}`);
            });
            tween.onComplete((obj) => {
                console.log('complete', obj);
            });
            // Quadratic: 动画时间函数
            // InOut: 动画类型, 先加速, 后减速
            tween.easing(TWEEN.Easing.Quadratic.Out);
            // 重复执行2次
            tween.repeat(1);
            // 以溜溜球的方式执行动画
            tween.yoyo(false);
            // 每次都延迟100ms执行
            tween.delay(100);
            tween.start();
        }

        function animate(time) {
            const result = TWEEN.update(time);
            requestAnimationFrameID = requestAnimationFrame(animate);
            // 如果动画已经结束
            if (!result) {
                // 取消之前启用requestAnimationFrame
               cancelAnimationFrame(requestAnimationFrameID);
            }
            console.log('animate');
        }

       
    </script>
</body>

</html>